<template>
	<view class="flex-col page">

		<view class="flex-col group_1">
			<scroll-view scroll-y="true" v-if="list.length>0" :style="{height:scrollHeight+'px'}"
				@scrolltolower="loadmore">
				<view class="flex-col list">
					<view class="flex-col list-item" :key="i" v-for="(item, i) in list"
						@click="go('/pages/notice/notice?id='+item.id)">
						<text class="text_1">{{item.title}}</text>
						<text class="text_3">{{item.summary}}</text>
						<image :src="item.coverImg" class="image_1" />
						<view class="justify-between group_2">
							<text class="text_5">{{item.createDate}}</text>
							<text class="text_7" @click.stop="del(item.id,i)">删除</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="" v-else>
				<u-empty style="height: 100vh;" width="250" mode="data" textSize="30rpx"
					icon="http://cdn.uviewui.com/uview/empty/order.png">
				</u-empty>
			</view>
			<view class="flex-col items-end section_6">
				<view class="flex-col items-center text-wrapper" @click="empty"><text class="text_28">清空消息</text></view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				more: false,
				status: 'loadmore',
				scrollHeight: 0,
				list: [],
				page: {
					pageNum: 1,
					pageSize: 10,
					type: '2'
				}
			};
		},
		created() {
			this.getGonggao();
		},
		mounted() {
			this.getScrollHeight();
		},
		methods: {
			loadmore() {
				// this.status = "loading";
				this.more = true;
				this.page.pageNum++;
				this.getGonggao(1)
			},
			getScrollHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.page').boundingClientRect();
				query.select('.section_6').boundingClientRect();
				query.exec(r => {

					//进入页面滚动到底部
					this.scrollHeight = r[0].height - r[1].height;

				});
				console.log(this.scrollHeight);
			},
			getGonggao(type = 0) {
				this.$http('message.article', this.page).then(r => {
					if (r.code == 200) {
						if (type == 0) {
							this.list = r.data
						} else {
							if (r.data.length > 0) {
								this.list = this.list.concat(r.data);
								this.status = "loadmore";
							} else {
								this.status = "nomore";

							}
						}


					}
				});
			},
			empty() {

				uni.showModal({
					title: '提示',
					// 提示文字
					content: '确认清空信息吗？',
					// 取消按钮的文字自定义
					cancelText: "取消",
					// 确认按钮的文字自定义
					confirmText: "删除",
					//删除字体的颜色
					confirmColor: 'red',
					//取消字体的颜色
					cancelColor: '#000000',
					success: res => {
						if (res.confirm) {
							this.$http('message.deleteConsumerAllNotice').then(r => {
								if (r.code == 200) {
									this.list = [];
								}
							});
						} else {
							// 执行取消后的操作
						}
					}


				})
			},
			del(id, i) {

				uni.showModal({
					title: '提示',
					// 提示文字
					content: '确认删除该条信息吗？',
					// 取消按钮的文字自定义
					cancelText: "取消",
					// 确认按钮的文字自定义
					confirmText: "删除",
					//删除字体的颜色
					confirmColor: 'red',
					//取消字体的颜色
					cancelColor: '#000000',
					success: res => {
						if (res.confirm) {
							this.$http('message.articleIdDelete', {
								noticeId: id
							}).then(r => {
								if (r.code == 200) {
									this.list.splice(i, 1);
								}
							});
						} else {
							// 执行取消后的操作
						}
					}


				})

			},
		},
	};
</script>

<style scoped lang="scss">
	.list-item {
		padding: 29rpx 23rpx 34rpx 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.text_1 {
		margin-left: 8rpx;
		align-self: flex-start;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_3 {
		margin-left: 8rpx;
		margin-top: 24rpx;
		align-self: flex-start;
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_1 {
		margin-top: 33rpx;
		border-radius: 16rpx;
		width: 654rpx;
		height: 328rpx;
	}

	.group_2 {
		margin-top: 21rpx;
	}

	.text_5 {
		margin-top: 6rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_7 {
		margin-bottom: 6rpx;
		color: #ff371d;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.page {
		background-color: #f6f7f9ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
	}

	.group_1 {
		flex: 1 1 auto;
		overflow-y: auto;
		padding-bottom: 120rpx;
	}

	.list {
		padding: 15rpx 24rpx 32rpx;
	}

	.section_6 {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 0;
		background-color: #ffffff;
		box-shadow: 0px -2rpx 4rpx 0px #00000014;
	}

	.list-item:not(:first-of-type) {
		margin-top: 20rpx;
	}

	.text-wrapper {
		margin-right: 32rpx;
		padding: 14rpx 0;
		background-color: #1d6aff14;
		border-radius: 28rpx;
		width: 148rpx;
	}

	.text_28 {
		color: #1d6aff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}
</style>
